<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>屌丝神作</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <style type="text/css">
        * {
            box-sizing: border-box;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        html,
        body {
            margin: 0;
            padding: 0;
            border: none;
        }

        a {
            color: white;
        }

        #bg-img {
            width: 100%;
            height: 850px;
            background-image: url("images/main-bg.png");
            background-position: 50% 50%;
            position: relative;
        }
        #bg-img div {
            width: 250px;
            height: 50px;
            background-color: #0A6875;
            border-radius: 3px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            border: none;
            color: white;
            position: absolute;
            top: 300px;
            left: calc((100% - 250px)/2);
        }

        h1{
            text-align: center;
            font-weight: bold;
        }
         p a{
            color: cornflowerblue;
        }
        p{
            text-align: center;
        }
        .topborder{
            border-top: 2px solid #191e2b;
            width: 200px;
            margin: 0 auto;
        }

        #main{
            width: 1125px;
            margin: 0 auto;
        }
        #main span{
            display: block;
            width: 150px;
            height: 0;
            margin: 0 auto;
            border: 1px solid #32A7B8;
        }
        #main div{
            padding: 35px 0;
            /*background-color: red;*/
            display: flex;
        }
        #main div img{
            width: 615px;
        }
        #main div p{
            flex-grow: 1;
            text-align: center;
            line-height: 50px;
        }
        #main div:nth-of-type(2n) {
            flex-flow: row-reverse;
        }




        footer {
            height: 100px;
            padding-top: 20px;
            background-color: #191e2b;
        }

        dl {
            left: 10%;
            position: relative;
            width: 23%;
            display: inline-block;
        }

        dd {
            margin: 0;
        }

        dd a {
            color: turquoise;
        }

        dt {
            color: white;
        }

        .weiBuTuPian {
            top: -40px;
            position: relative;
        }

        dd img {
            width: 30px;
            height: 30px;
            float: left;
            display: flex;
        }
        #bg-img div,
        #bg-img2 div {
            width: 250px;
            height: 50px;
            background-color: #0A6875;
            border-radius: 3px;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            border: none;
            color: white;
            position: absolute;
            cursor: pointer;
            left: calc((100% - 250px)/2);
        }
        
        #bg-img div {
            top: 300px;
        }
        
        #bg-img2 div {
            top: 3450px;
        }
        .last span{
            border:none!important;
            line-height: 20px;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-fixed-top navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Brand</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">WoW</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li><a href="#">Docs</a></li>
                    <li><a href="#">Login</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Other <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

        </div>
    </nav>
    <div id="bg-img">
        <div>Start for Free</div>
    </div>
    <div>

        <h1>Simple Email MarKeting</h1>
            <p>Mailblast makes sending emails simple and cheap using
            Amazon's <a href=""> Simple Email service</a>
            </p>
        <p>
            Save moner and time without sacrificing deliverability
        </p>
        <div class="topborder">
        <h1 >Features</h1>
    </div>
    </div>

    <div id="main" class="">
        <div>
            <img src="images/01.png" alt="">
            <p class="last">List Management
                <span>Upload and manage your Subscriber lists</span><br>
                <span>online.Easy to use filters and import</span><br>
                <span>functionality make Management a breeze.</span>
            </p>
            
        </div>
        <span></span>
        <div>
            <img src="images/02.png" alt="">
            <p class="last">Send Campaigns
                <span>Create,test and schedule campaigns using</span><br><br>
                <span>an easy to use wizard.</span>
            </p>
        </div>
        <span></span>
        <div>
            <img src="images/03.png" alt="">
            <p class="last">Detailed Reports
                <span>See detailed reports on every campaign.</span><br>
                <span>Bounces and complaints are automatically</span><br><br>
                <span>filtered for future campaign.</span>
            </p>
        </div>
        <span></span>
        <div>
            <img src="images/04.png" alt="">
            <p class="last">MarKeting Automation
                <span>Send scheduled automated emails to users</span><br><br>
                <span>who sign up to your list.</span>
            </p>
        </div>
        <span></span>
        <div>
            <img src="images/05.png" alt="">
            <p class="last">Signup Forms
                <span>Embed Signup forms on your website to</span><br>
                <span>drive Subscribers to your list.</span>
            </p>
        </div>
        <span></span>
    </div>

    <div id="bg-img2">
        <div>Start with Free Plan</div>
    </div>
    <p style="margin-top: 90px;">1,000 Subscribers.Unlimited Emails.</p>
    <p>Does not include Amazon SES fees(62,000 free emails/month) 0.10$/1000 emails after.</p>
    <footer>
        <dl>
            <dt>Quick Links</dt>
            <dd><a href="#">Api Docs</a></dd>
            <dd><a href="#">Priclng</a></dd>
            </dl>
            <dl>
                <dt>Help</dt>
                <dd><a href="#">contact@mailblast.io</a></dd>
                <dd><a href="#">Documentation</a></dd>
            </dl>
                <dl>
                    <dt>Legal</dt>
                    <dd><a href="#">Terms of Service</a></dd>
                    <dd><a href="#">Privacy Policy</a></dd>
                </dl>
                    <dl class="weiBuTuPian">
                        <dt>Social</dt>
                        <dd><img src="images/fackbook.png" alt=""></dd>
                        <dd><img src="images/twitter.png" alt=""></dd>
                    </dl>
    </footer>

</body>

</html>